<template>
    <div class="page-login">
        <div class="logo-section">
            <div class="x-logo bg"></div>
            <div class="x-logo">
                <div class="x-line">必火</div>
                <div class="x-line">商机</div>
            </div>
        </div>
        <div class="page-title">
            管理登陆 0.9
        </div>
        <cube-form class="login-form"
                :model="model"
                :schema="schema"
                :immediate-validate="false"
                :options="options"
                @validate="handleValidate"
                @submit="handleSubmit"
                @reset="handleReset"></cube-form>
    </div>
</template>

<script>
import Auth from 'src/api/auth';
export default {
    data() {
        return {
            validity: {},
            valid: null,
            model: {
                username: 'x',
                password: '123456'
            },
            schema: {
                groups: [
                    {
                        // legend: '登录',
                        fields: [
                            {
                                type: 'input',
                                modelKey: 'username',
                                label: '用户名',
                                props: {
                                    placeholder: '请 输入用户名'
                                },
                                rules: {
                                    required: true
                                },
                                // validating when blur
                                trigger: 'blur'
                            },
                            {
                                type: 'input',
                                modelKey: 'password',
                                label: '密码',
                                props: {
                                    placeholder: '请输入密码'
                                },
                                rules: {
                                    required: true
                                },
                                // validating when blur
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        fields: [
                            {
                                type: 'submit',
                                label: '登录'
                            }
                        ]
                    }
                ]
            },
            options: {
                scrollToInvalidField: true,
                layout: 'standard' // classic fresh
            }
        };
    },
    methods: {
        handleSubmit(e) {
            Auth.login(this.model.username, this.model.password)
                .then(() => {
                    // this.$router.push({ name: '商机列表' });
                    this.$router.push({ name: '首页' });
                });
            e.preventDefault();
        },
        handleValidate(result) {
            this.validity = result.validity;
            this.valid = result.valid;
            console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex);
        },
        handleReset(e) {
            console.log('reset', e);
        }
    }
};
</script>

<style scoped lang="scss">
.page-login {
    padding-top: 15vh;
    height: 100vh;
    background: white;
    box-sizing: border-box;
    .logo-section {
        position: relative;
        margin: 0 auto;
        width: 2rem;
        height:2rem;
        .x-logo {
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height:100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: column;
            text-align: center;
            background: #0076FF ;
            border-radius: 0.2rem;
            font-size:0.56rem;
            color: white;
        }
        .x-logo.bg {
            opacity: 0.26;
            transform: rotate(45deg);
            animation: rotate 1s forwards infinite;
        }
        .x-line {
            width:100%;
            flex-shrink: 0;
            line-height: 1.2em;;
        }
    }
    .page-title {
        margin-top:0.56rem;
        text-align: center;
        font-size: 0.4rem;
        color:#3884E8;
    }
    .login-form {
        margin-top: 0.2rem;
    }
    @keyframes rotate {
        0% {
            transform: rotate(45deg);
        }
        100% {
            transform: rotate(135deg);
        }
    }
}
</style>